<template>
	<div v-if="contentLoaded">
		<!-- 地址 -->
		<AddressHeader :address="orderDetail.address_info"></AddressHeader>
		<!-- 订单商品列表 -->
		<div v-for="goods in goodsList" class="goods-container">
			<OrderItem type="orderDetail" :item="goods">
				<div class="fr textRight btn-container">
					<!-- 根据订单status判断商品可操作actions, 此时订单status<=8, 商品status为0 -->
                	<div class="c-btn"
	                	v-for="(a,i) in orderStatus[order.status].goodsActions" :key="i"
						@click.prevent = "clickBtn(goodsActions[a].title, goods.goods_id)">
						{{goodsActions[a].title}}
					</div>
                	<!-- 根据商品自己的status判断商品可操作actions, 此时订单status>=9, 商品status不为0 -->
					<div class="c-btn"
						v-for="(a,i) in goodsStatus[goods.status].actions" :key="i"
						:class="{highlight: goodsActions[a].highlight}"
						@click.prevent="clickBtn(a.title, goods.goods_id)">
						{{goodsActions[a].title}}
					</div>
					<!-- 待评价判断方式不同 单独拎出来写 -->
                	<div class="c-btn" v-if="goods.is_comment == 0"
                		@click.prevent = "clickBtn('评价', goods.goods_id)">
                		评价
                	</div>
				</div>
			</OrderItem>
		</div>
		<!-- 订单编号 -->
		<div id="info_container">
			<p>订单编号：{{order.order_no}}</p>
			<p>创建时间：{{utcToDate(order.start_time)}}</p>
			<p v-if="order.pay_time > 0">付款时间：{{utcToDate(order.pay_time)}}</p>
			<p v-if="order.deliver_time > 0">发货时间：{{utcToDate(order.deliver_time)}}</p>
			<p v-if="order.complete_time > 0">成交时间：{{utcToDate(order.complete_time)}}</p>
		</div>
	</div>
</template>
<script>
import { Indicator } from 'mint-ui'
import { mapGetters, mapActions } from 'vuex'
import { utcToDate } from '@/assets/js/utils.js'
import OrderItem from './OrderItem'
import AddressHeader from '@/components/AddressHeader'
export default{
	name:'OrderDetail',
	created(){
		this.orderId = this.$route.params.orderId
		this.getDetail(this.orderId)
	},
	data(){
		return {
			contentLoaded: false,
			orderId: ''
		}
	},
	computed:{
		...mapGetters({
			orderDetail: 'order/detail',
			orderStatus: 'order/orderStatus',
			goodsStatus: 'order/goodsStatus',
			goodsActions: 'order/goodsActions',
		}),
		order(){
			return this.orderDetail.order
		},
		goodsList(){
			return this.orderDetail.goods_info
		}
	},
	methods:{
		utcToDate,
		async getDetail(orderId) {
			Indicator.open()
			await this.$store.dispatch('order/getOrderDetail', orderId)
			this.contentLoaded = true
			Indicator.close()
		},
		clickBtn(actionTitle, goodsId) {
			switch (actionTitle) {
				case '申请退换货':
					this.$router.push(`/order/refund/${this.orderId}/${goodsId}`)
					break
				case '评价':
					this.$router.push(`/order/writeComment/${this.orderId}/${goodsId}`)
					break
			}
		}
	},
	components: { OrderItem, AddressHeader }
}
</script>
<style lang='less' scoped>
.goods-container{
	margin-bottom: .2rem;
	.btn-container{
		margin-top: .5rem;
	}
}
#info_container{
	margin-top: .2rem;
    padding: .4rem;
    background: #fff;
    color: #b5b5b5;
    font-size: .29rem;
    line-height: .4rem;
}
.c-btn{
	margin-left: .3rem;
	min-width: 1.6rem;
	width: auto;
	padding: 0 .1rem;
}
</style>